<template>
  <view class="page-wrapper" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">
    <navBar title="会员中心" />
    <view v-if="emptyVisible" class="empty">
      <image src="@/static/empty.png"></image>
      <text>无数据</text>
    </view>
    <view v-else class="content-wrapper">
      <view class="page-level">
        <u-swiper :list="swiperList" height="320" previousMargin="40" nextMargin="40" :autoplay="false" radius="5"
          bgColor="#ffffff" circular :current="current" @change="changeItem">
        </u-swiper>
      </view>
      <view class="page-rights">
        <view class="rights-top">
          <view class="right-title">会员特权（ {{hasRightNum||0}}/{{allRightNum||0}} ）</view>
          <view class="right-rules" @click="handleRules">规则</view>
        </view>
        <view class="rights-bottom">
          <u-grid :border="false" col="4">
            <u-grid-item v-for="(item,index) of rightList" :key="index" @click="handleDetail(item)">
              <view class="item" :class="item.enabledFlag===0?'enabled-item':''">
                <u--image v-if="item.icon" :src="item.icon" width="32px" height="32px"></u--image>
                <u--image v-else src="@/static/empty2.png" width="32px" height="32px"></u--image>
                <view class="grid-text">{{item.rightName||""}}</view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from 'vuex'
  import navBar from '@/components/navBar.vue'
  export default {
    components: {
      navBar
    },
    data() {
      return {
        emptyVisible: false,
        swiperList: [],
        current: 0,
        rightList: [],
        hasRightNum: 0,
        allRightNum: 0,
      };
    },
    onShow() {
      this.refreshUserInfo()
      this.initData()
    },
    computed: {
      ...mapGetters('user', ['getUserInfo']),
      ...mapGetters('global', ['getSystemInfo'])
    },
    methods: {
      ...mapActions('user', ['refreshUserInfo']),
      
      //设置不同等级背景图
      setLevelBackgroundImage(flag) {
        if (flag === 0) { //普通会员
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/member_level_01.png"
        } else if (flag === 1) { //认证会员
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/member_level_02.png"
        } else { //VIP会员/其他会员等级
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/member_level_03.png"
        }
      },
      async initData() {
        uni.showLoading({
          title: '加载中...'
        })
        try {
          const res = await this.$request({
            url: '/user-center/app/users/memberRight',
            method: 'GET',
            data: {
              userId: this.getUserInfo.id
            }
          })
          uni.hideLoading()
          let list = res.datas
          if (list && list.length) {
            list.forEach((item, index) => {
              //判断当前用户是什么等级并定位到对应等级展示
              if (item.levelId === this.getUserInfo.userMember.levelId) {
                this.rightList = item.rightList
                this.allRightNum = item.allRightNum
                this.hasRightNum = item.hasRightNum
                this.current = index
              }
              this.swiperList.push({
                url: this.setLevelBackgroundImage(item.levelIndex),
                type: 'custom',
                allRightNum: item.allRightNum,
                hasRightNum: item.hasRightNum,
                levelIndex: item.levelIndex,
                name: item.levelName,
                info: item.threshold,
                rightList: item.rightList,
              })
            })
          } else {
            this.emptyVisible = true
          }
        } catch (e) {
          uni.hideLoading()
          uni.showToast({
            title: '获取信息失败',
            icon: 'error'
          })
          this.emptyVisible = true
        }
      },
      //切换swiper
      changeItem(index) {
        let current = index.current
        this.rightList = this.swiperList[current].rightList
        this.allRightNum = this.swiperList[current].allRightNum
        this.hasRightNum = this.swiperList[current].hasRightNum
      },
      //跳转规则页面
      handleRules() {
        uni.navigateTo({
          url: `/minePack/user/memberCenter/rules`
        })
      },
      //跳转权益具体页 
      handleDetail(item) {
        if (item.enabledFlag === 0) {
          return false
        } else {
          //TODO根据名称或者其他字段跳转到对应页面
          // uni.showToast({
          //   title: '跳转对应页面'
          // })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrapper {
    box-sizing: border-box;
    background-color: #FFFFFF;
    padding-bottom: 20rpx;

    .page-level {
      margin-top: 40rpx;
    }

    .page-rights {
      margin-top: 52rpx;
      margin-left: 60rpx;
      margin-right: 50rpx;

      .rights-top {
        display: flex;
        justify-content: space-between;

        .right-title {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
        }

        .right-rules {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.65);
        }
      }

      .rights-bottom {
        margin-top: 40rpx;

        /deep/ .u-grid-item {
          margin: 20rpx 0;
        }

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .grid-text {
            margin-top: 24rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.65);
            width: 100%;
            text-align: center;
          }
        }

        .enabled-item {
          color: rgba(0, 0, 0, 0.35);
          user-select: none;
          filter: grayscale(1);
        }
      }
    }

    .empty {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      image {
        width: 220px;
        height: 180px;
      }

      text {
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.45);
        line-height: 30rpx;
      }
    }
  }
</style>